<template>
	<div class="card-main">
		<div class="card-main-title flex align-center" @click="handleNoticeLinkto()">
			<strong>通知 |</strong>
			<el-tag effect="plain" class="card-main-tag">{{ noticeItem.readFlag == 1 ? '已读' : '未读' }}</el-tag>
			<p>{{ noticeItem.noticeTitle }}</p>
		</div>

		<div class="card-main-tip flex align-center">
			<img src="@/assets/icons/time.webp" alt="" class="icon-img" />
			<span v-if="statisticsTime">更新时间：{{ statisticsTime }} </span>
		</div>
		<ul class="card-main-content flex align-center">
			<li class="item flex1" v-for="(item, index) in dataList" :key="index" @click="showList(item)">
				<p class="label">{{ item.label }}</p>
				<p class="value" style="cursor: pointer">{{ item.value }}</p>
			</li>
		</ul>
		<!-- 弹出框 -->
		<el-dialog v-model="dialogTableVisible" title="" style="width: 500px" append-to-body>
			<el-table :data="tableDataOrganization" border v-loading="tableLoading">
				<el-table-column align="center" prop="areaName" label="区域" />
				<el-table-column align="center" prop="areaNum" :label="selectStatistics">
					<template #default="{ row }">
						<div @click="clickTableCell(row, 1, 10)" style="cursor: pointer">
							{{ row.areaNum }}
						</div>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<!-- 区域列表弹出框 -->
		<el-dialog v-model="areaVisible" title="" width="65%" append-to-body>
			<el-table v-if="areaVisible" :data="areaTableData" border v-loading="areaTableLoading">
				<el-table-column show-overflow-tooltip align="center" v-for="item in areaTableColumn" :property="item.prop" :label="item.label" />
			</el-table>
			<div style="display: flex; justify-content: flex-end; margin-top: 15px">
				<el-pagination
					v-model:current-page="currentPage"
					v-model:page-size="pageSize"
					:page-sizes="[10, 20, 30, 40]"
					layout="total, sizes, prev, pager, next, jumper"
					:total="tableTotal"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</el-dialog>

		<el-dialog v-model="visibleNotice" width="45%">
			<NoticeDetail :nowRowData="noticeItem"></NoticeDetail>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import apiMod from '@/apiMod/index'
import { getStore } from '@/utils/store'
import NoticeDetail from '../NoticeAnnounce/NoticeDetail/index.vue'

const userInfo = getStore('userInfo') || {}
const noticeItem = ref({} as any)
const statisticsTime = ref('')
const visibleNotice = ref(false)
const dataList = ref([
	{ label: '服务对象', value: '' },
	{ label: '养老服务设施', value: '' },
	{ label: '养老机构', value: '' },
	{ label: '养老服务运营单位', value: '' },
	{ label: '养老从业人员', value: '' },
	{ label: '养老行业服务商', value: '' },
])

const dialogTableVisible = ref(false)
const tableLoading = ref(false)
const selectStatistics = ref('')
const tableDataOrganization = ref([])
//获取列表
const showList = async (item) => {
	selectStatistics.value = item.label
	if (item.data.length <= 0) {
		ElMessage({
			message: '无数据',
			type: 'warning',
		})
	} else {
		dialogTableVisible.value = true
		tableDataOrganization.value = item.data.map((item) => {
			return {
				...item,
				value: item.areaNum,
			}
		})
		tableLoading.value = false
	}
}
//区域列表的变量和表格
const areaVisible = ref(false)
const areaTableLoading = ref(false)
const areaTableData = ref([])
const areaTableColumn = ref([])

let pageApiQuery = {
	areaId: userInfo.authArea,
}

const currentPage = ref(1)
const pageSize = ref(10)
const tableTotal = ref(0)

const handleSizeChange = (val: number) => {
	currentPage.value = 1
	pageSize.value = val
	clickTableCell(pageApiQuery, currentPage.value, pageSize.value)
}
const handleCurrentChange = (val: number) => {
	currentPage.value = val
	clickTableCell(pageApiQuery, currentPage.value, pageSize.value)
}

//获取每一区域的分页列表
const clickTableCell = async (val, current, size) => {
	pageApiQuery = val
	if (val.value == 0) {
		ElMessage({
			message: '无数据',
			type: 'warning',
		})
		return
	}
	areaVisible.value = true
	areaTableLoading.value = true
	const authAreaArr = [userInfo.authProvince, userInfo.authCity, userInfo.authArea, userInfo.authStreet, userInfo.authCommunity].filter(Boolean)

	let data:any = {
    areaId: val.areaId || '',
    isWithAuth:0,
		current,
		pageParaPO: { total: val.value, size, current },
		size,
	}
	switch (authAreaArr.length) {
		case 1:
      data.areaId = val.areaId || ''
			break
		case 2:
       data.areaId = val.areaId || ''
			break
		case 3:
       data.areaId = val.areaId || ''
			break
		case 4:
       data.streetId = val.areaId || ''
			break
		case 5:
       data.communityId = val.areaId || ''
			break
	}
	switch (selectStatistics.value) {
		case '服务对象':
			areaTableColumn.value = [
				{ label: '序号', prop: 'serialNum' },
				{ label: '户籍地区', prop: 'region_name' },
				{ label: '证件号码', prop: 'idCard', plusXing: '2,2' },
				{
					label: '姓名',
					prop: 'name',
				},
				{
					label: '性别',
					prop: 'genderLabel',
				},
				{ label: '年龄', prop: 'age' },
				{ label: '联系方式', prop: 'telephone', plusXing: '5,2' },
				{ label: '现居地区', prop: 'address' },
				{
					label: '老人类别',
					prop: 'elderlyTypeLabel',
					custome: 'dict',
					code: 'ELDERLY_TYPE',
				},
				{
					label: '居住情况',
					prop: 'residence',
					custome: 'dict',
					code: 'LIVE_SITUATE',
				},
				{
					label: '评估状态',
					prop: 'evaluationStatusLabel',
				},
				{ label: '入库时间', prop: 'createTime' },
			]
			let resultSOP = await apiMod.view_dpServiceObject_page(data)

			resultSOP.data.records.forEach((item, index) => {
				item.serialNum = (current - 1) * size + index + 1
				item.region_name = item.provinceName + '/' + item.cityName + '/' + item.areaName + '/' + item.streetName + '/' + item.communityName
				if (item.contactUserPhone) {
					item.contactUserPhone = item.contactUserPhone.replace(item.contactUserPhone.substring(5, 9), '****')
				}
			})
			areaTableData.value = resultSOP.data.records
			tableTotal.value = resultSOP.data.total
			break
		case '养老服务设施':
			areaTableColumn.value = [
				{ label: '序号', prop: 'serialNum' },
				{
					label: '所属区域',
					prop: 'region_name',
					type: 'AplidAreaSelect',
				},
				{ label: '设施名称', prop: 'soleValue' },
				{ label: '运营单位', prop: 'unitName' },
				{ label: '负责人', prop: 'personName' },
				{ label: '负责人联系方式', prop: 'personTelephone', plusXing: '5,2' },
				{
					label: '设施类别',
					prop: 'typeLabel',
				},
				{
					label: '设施评定等级',
					prop: 'standardLabel',
				},
				{
					label: '运营状态',
					prop: 'stateLabel',
				},
				{ label: '入库时间', prop: 'createTime' },
			]
			let resultSF = await apiMod.dpServiceFacility_page(data)

			resultSF.data.records.forEach((item, index) => {
				item.serialNum = (current - 1) * size + index + 1
				item.region_name = item.provinceName + '/' + item.cityName + '/' + item.areaName + '/' + item.streetName + '/' + item.communityName
				if (item.contactUserPhone) {
					item.contactUserPhone = item.contactUserPhone.replace(item.contactUserPhone.substring(5, 9), '****')
				}
			})
			areaTableData.value = resultSF.data.records
			tableTotal.value = resultSF.data.total
			break
		case '养老机构':
			areaTableColumn.value = [
				{ label: '序号', prop: 'serialNum' },
				{ label: '所属区域', prop: 'region_name' },
				{ label: '机构名称', prop: 'organizationName' },
				{
					label: '统一社会信用代码',
					prop: 'creditCode',
				},
				{ label: '联系人', prop: 'burdenUserName' },
				{ label: '联系方式', prop: 'burdenUserPhone' },
				{
					label: '机构类型',
					prop: 'organizationTypeLabel',
				},
				{
					label: '机构评定星级',
					prop: 'organizationLevelLabel',
				},
				{
					label: '是否备案',
					prop: 'filingFlagLabel',
				},
				{
					label: '床位总数',
					prop: 'bedTotalNum',
				},
				{
					label: '收住老人',
					prop: 'refugeTotalOldmanNum',
				},
				{ label: '入库时间', prop: 'createTime' },
			]
			let resultSOB = await apiMod.view_dpServiceOrgBase_page(data)

			resultSOB.data.records.forEach((item, index) => {
				item.serialNum = (current - 1) * size + index + 1
				item.region_name =
					item.provinceName + '/' + item.nowCityName + '/' + item.nowAreaName + '/' + item.nowStreetName + '/' + item.nowCommunityName
				if (item.contactUserPhone) {
					item.contactUserPhone = item.contactUserPhone.replace(item.contactUserPhone.substring(5, 9), '****')
				}
			})
			areaTableData.value = resultSOB.data.records
			tableTotal.value = resultSOB.data.total
			break
		case '养老服务运营单位':
			areaTableColumn.value = [
				{ label: '序号', prop: 'serialNum' },
				{ label: '所属区域', prop: 'region_name' },
				{ label: '组织名称', prop: 'orgHomeName' },
				{
					label: '统一社会信用代码',
					prop: 'creditCode',
				},
				{ label: '联系人', prop: 'contactUserName' },
				{ label: '联系方式', prop: 'contactUserPhone', plusXing: '5,2' },
				{
					label: '经营状态',
					prop: 'operateStatusLabel',
				},
				{
					label: '经营范围',
					prop: 'serviceScope',
				},
				{ label: '入库时间', prop: 'createTime' },
			]
			let resultSO = await apiMod.dpServiceOrgHome_page(data)

			resultSO.data.records.forEach((item, index) => {
				item.serialNum = (current - 1) * size + index + 1
				item.region_name =
					item.provinceName + '/' + item.nowCityName + '/' + item.nowAreaName + '/' + item.nowStreetName + '/' + item.nowCommunityName
				if (item.contactUserPhone) {
					item.contactUserPhone = item.contactUserPhone.replace(item.contactUserPhone.substring(5, 9), '****')
				}
			})
			areaTableData.value = resultSO.data.records
			tableTotal.value = resultSO.data.total
			break
		case '养老从业人员':
			areaTableColumn.value = [
				{ label: '序号', prop: 'serialNum' },
				{ label: '单位所在地区', prop: 'region_name' },
				{ label: '单位名称', prop: 'unitName' },
				{ label: '身份证号', prop: 'idCard' },
				{ label: '姓名', prop: 'practitionersName' },
				{ label: '联系方式', prop: 'phone' },
				{
					label: '专职',
					prop: 'workTypeLabel',
				},

				{
					label: '职业类型',
					prop: 'occupationTypeLabel',
				},
				{
					label: '文化程度',
					prop: 'cultureDegreeLabel',
				},

				{
					label: '证件名称',
					prop: 'certificateName',
				},
				{
					label: '在职状态',
					prop: 'serviceStateLabel',
				},
				{ label: '入库时间', prop: 'createTime' },
			]
			let resultFP = await apiMod.dpFoundationPractitioners_page(data)
			resultFP.data.records.forEach((item, index) => {
				item.serialNum = (current - 1) * size + index + 1
				item.region_name =
					item.provinceName + '/' + item.unitCityName + '/' + item.unitAreaName + '/' + item.streetName + '/' + item.unitCommunityName
				if (item.phone) {
					item.phone = item.phone.replace(item.phone.substring(5, 9), '****')
				}

				item.idCard = item.idCard.replace(item.idCard.substring(3, 16), '****')
			})
			areaTableData.value = resultFP.data.records
			tableTotal.value = resultFP.data.total
			break
		case '养老行业服务商':
			areaTableColumn.value = [
				{ label: '序号', prop: 'serialNum' },
				{ label: '注册地区', prop: 'registerAreaName' },
				{ label: '服务商名称', prop: 'providerName' },
				{
					label: '统一社会信用代码',
					prop: 'creditCode',
				},
				{ label: '联系人', prop: 'contactUserName' },
				{ label: '联系方式', prop: 'contactUserPhone' },
				{
					label: '经营状态',
					prop: 'providerStatusLabel',
					span: 8,
				},
				{
					label: '类别',
					prop: 'providerTypeLabels',
				},
				{
					label: '详细地址',
					prop: 'address',
				},
				{ label: '入库时间', prop: 'createTime' },
			]

			let resultSP = await apiMod.view_dpServiceProvider_page(data)

			resultSP.data.records.forEach((item, index) => {
				item.serialNum = (current - 1) * size + index + 1
				item.region_name =
					item.provinceName + '/' + item.nowCityName + '/' + item.nowAreaName + '/' + item.nowStreetName + '/' + item.nowCommunityName
				console.log(item.contactUserPhone)
				if (item.contactUserPhone) {
					item.contactUserPhone = item.contactUserPhone.replace(item.contactUserPhone.substring(5, 9), '****')
				}
			})
			areaTableData.value = resultSP.data.records
			tableTotal.value = resultSP.data.total
			break

		default:
			break
	}
	areaTableLoading.value = false
}

const getInitData = () => {
	apiMod.view_sysNoticeRecordByBsc_page().then((res) => {
		const dataItem = res.data.records[0] || {}
		noticeItem.value = dataItem || {
			noticeTitle: '市指导中心上传了《关于印发《南京市社区居家养老服务管理规定（试行）》的通知》',
			readFlag: 1,
		}
	})

	apiMod
		.view_dpStatistics_search({
			belongStatics: 'application',
		})
		.then((res) => {
			const data = res.data || {}

			const getDataValue = (prop) => {
				if (!data[prop]) {
					return {
						value: 0,
						data: [],
					}
				}
				statisticsTime.value = data[prop][0]?.createTime
				return {
					value: data[prop][0]?.statisticsNum || 0,
					data: data[prop],
				}
			}
			dataList.value = [
				{ label: '服务对象', ...getDataValue('服务对象') },
				{ label: '养老服务设施', ...getDataValue('养老服务设施') },
				{ label: '养老机构', ...getDataValue('养老机构') },
				{ label: '养老服务运营单位', ...getDataValue('养老服务运营单位') },
				{ label: '养老从业人员', ...getDataValue('养老从业人员') },
				{ label: '养老行业服务商', ...getDataValue('养老行业服务商') },
			]
		})
}

const handleNoticeLinkto = () => {
	visibleNotice.value = true
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.card-main {
	min-width: vw(500);
	color: #fff;
	border-radius: 10px;
	height: 215px;
	padding: vw(15);
	background: linear-gradient(129.65deg, #487fef 0%, #6d9bf9 100%);
	display: flex;
	flex-flow: column;
	justify-content: space-around;

	&-title {
		height: 55px;
		border-radius: 10px;
		background: #ffffff2f;
		padding: vw(15);
		color: #fff;
	}

	&-tag {
		background: #ffffff3b;
		color: #fff;
		margin: 0 6px;
	}

	&-tip {
		color: #ffffff76;

		.icon-img {
			width: vw(16);
			height: vw(16);
			margin-right: 6px;
		}
	}

	&-content {
		font-family: 'Bahnschrift';
		text-align: left;
		color: #fff;
		flex-flow: row wrap;
		font-weight: 400;

		.item {
			.label {
				font-size: 16px;
			}

			.value {
				font-size: 32px;
			}
		}
	}

	:deep(.el-table tr) {
		font-weight: normal;
	}
}
</style>
